<script lang="ts" setup>
import {ref} from 'vue'
import {feedbackApi} from "@/api/user";
import {IMessage} from "@/components/aw-message/message";

const activeType = ref<0 | 1 | 2 | 3>()
const feedbackTypes = [
  {
    name: "技术问题",
    value: 0
  },
  {
    name: "使用问题",
    value: 1
  },
  {
    name: "功能建议",
    value: 2
  },
  {
    name: "其他",
    value: 3
  }
]
const onChooseType = (type: 0 | 1 | 2 | 3) => {
  activeType.value = type
}
// 反馈内容
const content = ref()
const isFocus = ref(false)
let timer: number
const onSubmitFeedback = async () => {
  // 1、先判断是否提交频繁
  if (timer) {
    return IMessage({
      content: '请勿频繁提交',
      type: 'warning'
    })
  }
  // 2、判断是否填写了反馈内容
  if (activeType.value === undefined) {
    return uni.showToast({
      title: '请填写反馈内容和选择类型',
      icon: 'none'
    })
  }
  // 3、判断是否填写了反馈内容
  if (content.value === undefined || content.value?.length < 10) {
    return uni.showToast({
      title: '反馈内容不能少于10个字',
      icon: 'none'
    })
  }
  // 4、提交反馈
  await feedbackApi(activeType.value, content.value)
  uni.showToast({
    title: '反馈成功',
    icon: 'success'
  })
  // 5、清空输入框
  content.value = ''
  timer = setTimeout(() => {
    timer = 0
  }, 180000)
}
</script>

<template>
  <view class="feedback flex justify-center flex-column">
    <view class="feedback-item">
      <h3 class="text-black margin-bottom-sm">
        <text class="text-red text-df">*</text>
        反馈类型
      </h3>
      <view class="flex justify-between flex-wrap " style="gap: 15px">
        <text v-for="(item, index) in feedbackTypes" :key="index"
              :class="[activeType === item.value ?'bg-gradual-awGreen': 'line-awGreen']"
              class="cu-btn round lg  "
              @click="onChooseType(item.value as 0 | 1 | 2 | 3)">{{ item.name }}
        </text>
      </view>
    </view>
    <view class="feedback-item">
      <h3 class="text-black margin-bottom-sm">
        <text class="text-red text-df">*</text>
        反馈内容
      </h3>
      <textarea v-model="content" :class="[isFocus ? 'focus' : '']" class="cu-textarea feedback-content" maxlength="200"
                placeholder="请输入反馈内容" @blur="isFocus=false" @focus="  isFocus = true"/>
      <text class=" text-gray flex justify-end margin-top-sm" style="width: 100%">{{ content?.length || 0 }}/200</text>
    </view>
    <button  class=" bg-gradual-awGreen lg" style="width: 100%" @click="onSubmitFeedback">
      提交
    </button>
    <br>
    <text class="text-red text-sm">注意:后续反馈处理结果请查看消息中心！</text>
  </view>
</template>

<style lang="scss" scoped>
.feedback {
  padding: 40rpx;
  width: 100%;
  /* #ifdef H5 */
  background-color: #fff;
  /* #endif */


  &-item {
    width: 100%;
    margin-bottom: 80rpx;;
  }

  &-content {
    width: 100%;
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 20rpx;
  }

  .focus {
    border: 1px solid #39c5bb;
    // 光标颜色
    caret-color: #3ebed3;
  }
}
</style>
